<template>
  <div class="detail">
    <el-container class="Box">
      <el-header class="titlebox" height="120px">
        <div class="LogoBox">
          <img src="../assets/img/logo.jpg">
          <div style="display:inline-block">
            <div style="font:700 30px/60px microsoft yahei;color:#666">二手手机交易平台</div>
            <span style="color:#aaa;padding-left:80px">二手优品，信誉保证</span>
          </div>
        </div>
        <div class="Inputbox">
        </div>
         <!-- 登录状态 -->
        <div class="Menubox">
          <div v-if="finish">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                我的<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                <el-dropdown-item command="b">我的商店</el-dropdown-item>
                <el-dropdown-item command="c">我的订单</el-dropdown-item>
                <el-dropdown-item command="d">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-else>
            <el-link type="primary" @click="Gologin">登录</el-link>
            &nbsp;&nbsp;
            <el-link type="info" @click="Goregister">注册</el-link>
          </div>
        </div>
      </el-header>
      <el-main class="mainbox">
        <div style="height:480px;padding-top:20px;width:1250px;overflow:hidden">
          <div class="TitilPic">
            <el-carousel trigger="click" height="406px" :autoplay="false">
              <el-carousel-item v-for="item of picture" :key="item">
                <img :src="baseurl+item">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="InfoBox">
            <div style="font:600 22px/30px microsoft yahei;color:#444;width:680px;height:60px;overflow:hidden">
              <span>【{{this.DetailsInfo.percentage}}】</span>
              <span>{{this.DetailsInfo.title}}</span>
            </div>
            <div style="padding:20px 0 30px 10px;width:680px">
              <span style="color:#aaa;font-size:14px">价格:&nbsp;</span>
              <span style="color:red;font-weight:700">
                <span style="font-size:20px">￥</span>
                <span style="font-size:36px">{{this.DetailsInfo.price}}</span>
              </span>
            </div>
            <div style="padding:0 0 30px 10px;height:100px;width:700px">
              <span style="color:#aaa;font-size:14px;">商品简介:&nbsp;</span>
              <span style="color:#444;font-size:16px">{{this.DetailsInfo.info}}</span>
            </div>
            <div style="padding:0 0 20px 10px;width:700px">
              <span  style="padding:0 150px 0 0">
                <span style="color:#aaa;font-size:14px">出售地:&nbsp;</span>
                <span style="color:#444;font-size:16px">{{this.DetailsInfo.fromwhere}}</span>
              </span>
              <span>
                <span style="color:#aaa;font-size:14px">是否包邮:&nbsp;</span>
                <span style="color:#444;font-size:16px">{{this.DetailsInfo.includepostage}}</span>
              </span>
            </div>
            <div style="text-align:right;padding:0px 50px 0 0"><el-button type="primary" @click="payGoods()">确定支付</el-button></div>
          </div>
        </div>
        <div class="DetailBox">
          <el-divider></el-divider>
          <div class="textTitle">商品详情</div>
          <div>
            <div class="DtitleText">商品介绍</div>
            <div class="Dcontent" style="line-height:22px;height:120px;width:1100px">{{this.DetailsInfo.info}}</div>
          </div>
          <div>
            <div class="DtitleText">核心参数</div>
            <div class="Dcontent" style="height:220px">
              <table align="center">
                <tr>
                  <td>成色：{{this.DetailsInfo.percentage}}</td>
                  <td>机身内存：{{this.DetailsInfo.fuselagememory}}</td>
                </tr>
                <tr>
                  <td>颜色：{{this.DetailsInfo.colorful}}</td>
                  <td>运行内存：{{this.DetailsInfo.runmemory}}</td>
                </tr>
                <tr>
                  <td>前摄像头：{{this.DetailsInfo.beforecamera}}</td>
                  <td>后摄像头：{{this.DetailsInfo.aftercamera}}</td>
                </tr>
                <tr>
                  <td>屏幕分辨率：{{this.DetailsInfo.screenresolution}}</td>
                  <td>最大存储扩展：{{this.DetailsInfo.maxmemory}}</td>
                </tr>
              </table>
            </div>
          </div>
          <div>
            <div class="DtitleText">图片详情</div>
            <div v-for="item of picture" :key="item" style="display:inline-block">
              <img :src="baseurl+item">
            </div>
          </div>
        </div>
      </el-main>
      <el-dialog title="确定支付" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品价格" :label-width="formLabelWidth" class="dialogBox">
            <el-input disabled v-model="this.DetailsInfo.price"></el-input>
          </el-form-item>
          <el-form-item label="支付密码" :label-width="formLabelWidth"  class="dialogBox">
            <el-input type="password" autocomplete="off" :show-password="true" placeholder="请输入支付密码..." v-model="form.pass"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="surepay">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data () {
    return {
        detailId: '',
        finish: true,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        picture: [],
        DetailsInfo: {},
        form: {},
        picurl: '',
        userID: '',
        baseurl: 'http://123.56.11.253:8181/transaction/'
    }
  },
  components: {},
  created () {
    this.IsLoginOrNot()
    this.getselectList()
    this.getDetails()
    // this.getuser()
  },
  methods: {
    // 判断是否已登录
    IsLoginOrNot () {
      const isNoN = sessionStorage.getItem('usertoken')
      // console.log(isNoN)
      if (isNoN) {
        this.finish = true
      } else {
        this.finish = false
      }
      // console.log(this.finish)
    },
    // 获取cookie
    getselectList () {
      this.detailId = this.$route.query.detailId
      this.userID = sessionStorage.getItem('userId')
      console.log(this.detailId)
    },
    // 登录
    Gologin () {
      this.$router.push({name: 'login',params:{user: true}})
    },
    // 注册
    Goregister () {
      this.$router.push({name: 'register',params:{user: true}})
    },
    //获取商品详细信息
     async getDetails () {
        const res = await this.$http.get(`goods/detail?id=${this.detailId}`)
        console.log(res)
        const {msg,status,data:{pics,showGoodsDetailVo}} = res.data
        if (status === 200) {
          this.picture = pics
          this.DetailsInfo = showGoodsDetailVo
          this.picurl = pics[0]
        } else {
          console.log(msg)
        }
     },
     // 支付按钮 
     payGoods () {
       this.dialogFormVisible = true
     },
     // 确定支付
     async surepay () {
       console.log(this.userID)
       const from = {
        buy: this.userID,
        sell: this.DetailsInfo.belongto,
        sellinfo: this.DetailsInfo.id
       }
       const AUTH_TOKEN = sessionStorage.getItem('usertoken')
       this.$http.defaults.headers.common['token'] = AUTH_TOKEN
       const res = await this.$http.post('order/add',from)
       console.log(res)
       if (res.data.status === 200) {
         this.dialogFormVisible = false
         this.$message.success('支付成功!')
       } else {
         this.dialogFormVisible = false
         this.$message.error('支付失败！')
       }
     },
     // 顶部下拉菜单选择触发的事件
    handleCommand(key) {
      if (key === 'a') {
        // 进入个人中心页面
        console.log('a')
        this.$router.push({path: '/mymessage'})
        // let routeData = this.$router.resolve({path: '/mymessage'})
        // window.open(routeData.href, '_blank')
      } else if(key === 'b') {
        // 进入我的商店页面
        console.log('b')
        this.$router.push({path: '/mystore'})
        // let routeData = this.$router.resolve({path: '/mystore'})
        // window.open(routeData.href, '_blank')
      } else if(key === 'c') {
        // 进入我的订单页面
        console.log('c')
        this.$router.push({path: '/myorder'})
        // let routeData = this.$router.resolve({path: '/myorder'})
        // window.open(routeData.href, '_blank')
      } else if (key === 'd') {
        // 退出登录
        this.$http.get('user/logout').then((res) => {
          console.log(res)
          if (res.data.status === 200) {
            this.$message.success('退出成功！')
            this.finish = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.Box
  height 100%
  background-color #f2f2f2
  min-width 1520px
  .titlebox
    background-color #fff
    display flex
    justify-content center
    align-items center
    overflow hidden
    padding-bottom 2%
    border-bottom solid 1px #ccc
    padding-top 10px
    .LogoBox
      width 40%
      min-width 400px
      img
        padding 1% 2% 0 20%
        width 100px
        height 100px
        vertical-align text-bottom
    .Inputbox
      width 40%
      padding-top 4%
      padding-left 5%
      min-width 400px
      .input
        width 400px
    .Menubox
      width 20%
      padding-top 6%
      text-align right
      padding-right 10%
      min-width 100px
.mainbox
  margin  0 140px 0 140px
  padding 0 0 0 0 !important
  height 100%
  background-color #fff
  .TitilPic
    height 408px
    width 400px
    background-color #f2f2f2
    border 4px solid orange 
    display inline-block
    margin-left 24px
    img
      height 410px
      width 400px
  .InfoBox
    display inline-block
    height 356px
    width 720px
    background-color #fff
    padding 20px 10px 20px 20px
    overflow hidden
    border 4px solid #c1c1c1
    border-radius 4px
    margin-left 30px
    margin-top 10px
  .DetailBox
    background-color #fff
    .textTitle
      font-weight 700
      font-size 20px
      color #333
      padding-left 20px
    table
      width 600px
      height 200px
    img 
      width 600px
      height 600px
      margin 0 300px 0 300px
    .DtitleText
      color #777
      font-size 16px
      padding 30px 30px 30px 30px
    .Dcontent
      font-size 16px
      padding 0px 30px 0px 50px
      color #333
      width 1000px
.dialogBox
  width 500px
  padding-left 80px
</style>
